<template>
  <el-container class="app-container">
    <main class="app-main">
      <el-aside class="app-aside">
        <div class="title">养老院管理系统</div>
        <div>
          <el-menu
            active-text-color="#fff"
            background-color="#e57373"
            :default-active="defaultMeunPath()"
            text-color="#fff"
            :router="true"
            style="border: none"
          >
            <el-menu-item
              :route="{ name: item.name }"
              v-for="(item, index) in showRoutes"
              :index="item.path"
            >
              <span>{{ item.meta.title }}</span>
            </el-menu-item>
          </el-menu>
        </div>
      </el-aside>
      <main class="right-main">
        <header class="right-header">
          <div
            style="
              margin-right: auto;
              font-weight: 700;
              display: flex;
              align-items: center;
            "
          >
            <el-button
              v-if="route.meta.isBack"
              link
              :icon="ArrowLeft"
              @click="$router.back()"
              style="margin-right: 20px"
              >返回</el-button
            >
            {{ route.meta.title }}&nbsp;&nbsp;&nbsp;&nbsp;{{ time }}
          </div>
          <div class="user">
            <el-dropdown trigger="click">
              <span class="el-dropdown-link">
                {{ username }}（{{ role }}）
                <el-icon class="el-icon--right">
                  <arrow-down />
                </el-icon>
              </span>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item @click="changePassword"
                    >修改密码</el-dropdown-item
                  >
                  <el-dropdown-item @click="logout">退出登录</el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </div>
        </header>
        <div class="right-router-main">
          <el-scrollbar v-if="scrollMaxHeight != 0" :height="scrollMaxHeight">
            <RouterView
          /></el-scrollbar>
        </div>
      </main>
    </main>
  </el-container>
</template>

<script setup>
import { RouterLink, RouterView, useRoute, useRouter } from "vue-router";
import { ArrowDown, ArrowLeft } from "@element-plus/icons-vue";
import adminRoutes from "@/router/adminRoutes";
import commonRoutes from "@/router/commonRoutes";
import { ref } from "vue";
import { onMounted } from "vue";
import { ElMessageBox, ElMessage } from "element-plus";
import { changeAdminPassword, changeNursePassword } from "@/api/request";
const router = useRouter();
const route = useRoute();
const showRoutes = [...commonRoutes];
const time = ref(new Date().toLocaleString());
const defaultMeunPath = () => {
  const path = route.path;
  // 截取第一部分
  return path.split("/")[1];
};
const scrollMaxHeight = ref(0);
const username = localStorage.getItem("username");
const role = localStorage.getItem("role");
if (localStorage.getItem("role") === "admin") {
  showRoutes.unshift(...adminRoutes);
}
const logout = () => {
  localStorage.clear();
  window.location.href = "/login";
};
const changePassword = () => {
  ElMessageBox.prompt("请输入新密码", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    inputType: "password",
  }).then(async ({ value }) => {
    if (value) {
      if (role == "admin") {
        await changeAdminPassword({
          id: localStorage.getItem("id"),
          password: value,
        });
        localStorage.clear();
        router.push("/login");
      } else {
        await changeNursePassword({
          id: localStorage.getItem("id"),
          password: value,
        });
        localStorage.clear();
        router.push("/login");
      }
      ElMessage.success("修改成功");
    } else {
      ElMessage.error("修改失败");
    }
  });
};
onMounted(() => {
  scrollMaxHeight.value = window.innerHeight - 66;
});
setInterval(() => {
  time.value = new Date().toLocaleString();
});
</script>

<style scoped lang="less">
.app-container {
  display: flex;
  flex-direction: column;
  width: 100vw;
  height: 100vh;
  &:deep(.is-active) {
    background-color: #d32f2f !important;
  }
  .right-main {
    flex: 1;
  }
  .right-router-main {
    padding: 10px;
    box-sizing: border-box;
    /* 背景图片核心设置 */

    position: relative; /* 为伪元素定位提供基准 */
    z-index: 1; /* 确保内容在伪元素上层 */
  }
  .right-router-main::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url("../assets/bg2.jpg");
    background-size: cover; /* 关键属性：按比例缩放至完全覆盖容器 */
    background-position: center; /* 图片居中显示 */
    background-repeat: no-repeat; /* 禁止重复平铺 */
    opacity: 0.35; /* 调整这个值控制透明度（0-1） */
    z-index: -1; /* 将伪元素置于内容下方 */
  }
  .right-header {
    height: 46px;
    border-bottom: 1px solid #f2f6fc;
    display: flex;
    align-items: center;
    padding: 0 20px;
    box-sizing: border-box;
  }
  .app-main {
    flex: 1;
    display: flex;
  }
  .app-aside {
    width: 255px;
    background-color: #e57373;
    box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1);
  }
  .title {
    display: flex;
    align-items: center;
    height: 66px;
    padding: 0 21px;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    color: #fff;
    font-weight: 700;
    font-size: 20px;
    white-space: nowrap;
    letter-spacing: 1px;
    background-color: #d32f2f;
  }
}
</style>
